<html>
<head>
	<title>Auchtung Canvas - By Peter Eliasson</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/charCodes.js"></script>
	<script language="javascript" src="js/processing.js"></script>
	<script language="javascript" src="js/init.js"></script>
	<script language="javascript" src="js/gameFunctions.js"></script>
	<style type="text/css">
		@import "css/reset.css";
		@import "css/main.css";
	</style>
</head>
<body> 
<script type="application/processing" id="script_auchtung">
	// Global variables
	ArrayList xPoints = new ArrayList();
	ArrayList yPoints = new ArrayList();
	snakes = {};
	int startWait = true;

	// Snake class
	class Snake{
		int x, y, rotation, radius;
		float speed, turnSpeed;
		int keyLeft, keyRight;
		int[] color = new int[3];
		bool alive;
		int holeDistance, holeSize;
		int score;
		
		Snake( keyL, keyR, snakeColor ){
			speed 		= 2.0 * ( (CANVAS_WIDTH / 1024) + (CANVAS_HEIGHT / 768) ) / 2;
			turnSpeed	= 3 * ( (CANVAS_WIDTH / 1024) + (CANVAS_HEIGHT / 768) ) / 2;
			radius			= 5 * ( (CANVAS_WIDTH / 1024) + (CANVAS_HEIGHT / 768) ) / 2;
			x					= random( radius*4, width - radius*4 ); // Start loc x
			y					= random( radius*4, height - radius*4 ); // Start loc y
			rotation		= random( 0, 360 ); // Starting rotation
			keyLeft 		= keyL;
			keyRight		= keyR;
			alive			= true;
			holeDistance = 0;
			color = snakeColor;
			score = 0;
		}
		
		void draw(){
			// If first 1 sec. Only draw a point
			if( startWait ){
				fill( color[0], color[1], color[2] );
				noStroke();
				ellipse( x, y, radius*2, radius*2 )
				return;
			}
			
			// If key down, rotate
			if( KEY_DOWN[keyLeft] ){
				rotation += turnSpeed
			} else if( KEY_DOWN[keyRight] ){
				rotation -= turnSpeed
			}
			
			// Calculate direction
			float deg = radians(rotation);
			
			// Calculate new speed. Also, should we create a hole
			if( holeDistance > 200 && int(random(30)) == 10 ){
				y += cos(deg) * 	random( radius*4, radius*6 );
				x += sin(deg) * 	random( radius*4, radius*6 );
				holeDistance = 0;
			} else {
				y += speed * cos(deg);
				x += speed * sin(deg);
			}
			
			// Draw the snake
			fill( color[0], color[1], color[2] );
			noStroke();
			ellipse( x, y, radius*2, radius*2 )
			
			// Add 1 to holeDistance
			holeDistance += 1;
			
			// Add location to x- and yPoints
			yPoints.add(y);
			xPoints.add(x);
		}
		
		bool collision(){
			// Calculate direction
			float deg = radians(rotation);
			
			// Screen edges
			if( x+radius > width || x-radius < 0 || y+radius > height || y-radius < 0){
				alive = false;
				return true;
			}
			// Snakes
			int nextY	= y + cos(deg) * radius*2;
			int nextX = x +  sin(deg) * radius*2;
			for (int i = 0; i < xPoints.size(); i++) {
				// If it will cross the point = collide
				if(	x < xPoints.get(i) && nextX > xPoints.get(i)  || x > xPoints.get(i) && nextX < xPoints.get(i) ) {
					if(	y < yPoints.get(i) && nextY > yPoints.get(i)  || y > yPoints.get(i) && nextY < yPoints.get(i) ) {
						alive=false;
						return true;
					}
				}
			}
			return false;
		}
		
		void addScore(){
			score ++;
		}
	}
	

	// Setup the Processing Canvas
	void setup(){
		size( CANVAS_WIDTH, CANVAS_HEIGHT );
		strokeWeight( 0 );
		frameRate( 30 );
		rectMode( CENTER )
		background( 204 );
		
		// Init snakes from the global SNAKES var
		for( s in SNAKES ){
			snakes[s] = new Snake( SNAKES[s].leftKey, SNAKES[s].rightKey, SNAKES[s].color );
		}
		setTimeout( function(){ startWait = false;} , 1000 );
	}

	// Main draw loop
	void draw(){
	
		aliveSnakes = 0;
		for( i in snakes ){
			if( snakes[i].alive ){
				aliveSnakes ++;
				snakes[i].draw();
				
				if( snakes[i].collision() ){
					for( j in snakes ){
						if( snakes[j].alive ) snakes[j].addScore();
					}
					updateGlobalScore(snakes);
				}
			}
		}
		
		if( aliveSnakes <= 1 ){
			endOfRound(snakes);
			exit();
		}
	}

</script>
<canvas id="canvas_auchtung" style="display: none; float: left;"></canvas>
<div id="score">
	<h1>Score</h1>
</div>
<div id="countDown"><div class="time"></div></div>
<div id="finalScore">
	<h1>The final score</h1>
	<ul></ul>
	<input type="button" value="Settings" id="settings_btn"/> or <input type="button" value="Restart" id="restart_btn">
</div>
<div id="config">
	<h1>Auchtung Canvas</h1>
	<h2>Web-based clone of the famous Auchtung Die Curve</h2>
	<h3>Players</h3>
	<form>
		<div id="players">
			<a href="javascript:;" id="addPlayer">Add player</a>
		</div>
	</form>
	<input type="button" id="start" value="Start" />
</div>
</body>
</html>